<template>
<div class="info">
    <div class="login">
      <div class="aa">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="账号" prop="user">
              <el-input type="text" v-model="ruleForm.user" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="验证码" prop="verifycode">
            <div>
              <div class="left">
                <el-input v-model="ruleForm.verifycode" placeholder="请输入验证码" class="identifyinput" @keyup.enter.native="submitForm()"></el-input>
              </div>
              <div class="identifybox">
                <div @click="refreshCode">
                  <s-identify :identifyCode="ruleForm.identifyCode"></s-identify>
                  <!-- <el-button @click="refreshCode" type='text' class="textbtn">看不清，换一张</el-button> -->
                </div>
              
            </div>
            </div>
          </el-form-item>
          <el-form-item>
            
          </el-form-item>


          <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          </el-form-item>
          </el-form>
      </div>
       
    </div>
</div>
    
</template>

<script>
import SIdentify from '../components/identify.vue'

 export default {
    data() {
        const validateVerifycode = (rule, value, callback) => {
          if (value === '') {
          callback(new Error('请输入验证码'))
          } else if (value !== this.ruleForm.identifyCode) {
          console.log('validateVerifycode:', value);
          callback(new Error('验证码不正确!'))
          } else {
          callback()
          }
        }

      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入账户'));
        } else {
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }  else {
          callback();
        }
      };
      return {
    
        ruleForm: {
          user: '',
          checkPass: '',
          verifycode:'',
          identifyCodes: '1234567890abcdefghijklmnopqrstuvwxyz',
  		    identifyCode: '',
        },
        
  		
        rules: {
          user: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          verifycode: [
            {validator: validateVerifycode,required: true,trigger: 'blur',}
          ]
        }
      };
    },
    components: { SIdentify },
    mounted(){
        this.ruleForm.identifyCode='';
        this.makeCode(this.ruleForm.identifyCodes,4);
        // disableBrowserBack();
        history.pushState(null, null, document.URL);
        if (window.history && window.history.pushState) {
            // $(window).on('popstate', function (){
            //     window.history.pushState('forward', null, '');
            //     window.history.forward(1);
            // });
          window.history.pushState('forward', null, '');  //在IE中必须得有这两行
          window.history.forward(1);
        }
    },
    methods: {
      randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min)
      },
      // 切换验证码   
      refreshCode() {
         this.ruleForm.identifyCode = ''
         this.makeCode(this.ruleForm.identifyCodes, 4)
      },
      makeCode(o, l) {
         for (let i = 0; i < l; i++) {
          this.ruleForm.identifyCode += this.ruleForm.identifyCodes[
          this.randomNum(0, this.ruleForm.identifyCodes.length)]
        }
          console.log(this.ruleForm.identifyCode)
      },

      submitForm(formName) {
        
        this.$refs[formName].validate((valid) => {
          
          if (valid) {
          this.$http.post('login', {username:this.ruleForm.user,pwd:this.ruleForm.checkPass}).then(res=>{
           if(res.code==200){
              this.$store.commit('set_authUser',res.data)
              this.$router.push({ path: '/admin'})
           }else{
              this.$message({
                type:'error',
                message :res.msg
              })
              this.refreshCode()
           }
           
           
          }).catch(err=>{
            this.$message({
              type:'error',
              message :err
            })
          })
          
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>

.info {
  width: 100%;
  height: 740px;
  background: url("../../static/img/bangong.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}
.login {
  /* background: url("../assets/images/login_bg.png") no-repeat; */
  background-color: rgba(255,255,255,0.7);
  /* opacity: 1.0 ; */
  background-size: cover;
  width: 500px;
  height: 350px;
  margin: 215px auto;
  overflow: hidden;
  padding-top: 10px;
  line-height: 40px;
  /* border: 1px solid red; */
  
  
}
.aa{
   width: 400px;
   padding:30px;
    /* padding-top: 10px; */
  /* text-align: center;
 
  line-height: 300px; */
  /* border: 1px solid black; */
}
#password {
  margin-bottom: 5px;
}
h3 {
  color: #0babeab8;
  font-size: 24px;
}
hr {
  background-color: #444;
  margin: 20px auto;
}
a {
  text-decoration: none;
  color: #aaa;
  font-size: 15px;
}
a:hover {
  color: coral;
}
.el-button {
  width: 80%;
  margin-left: 30px;
}

 .left{
  width: 60%;
  float: left;
}

 .identifybox {
   float: left;
   width: 38%;
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
   
 }
/* .info{
    width: 100%;
    height: 700px;
    border: 1px solid black;
    background-image: url('../../static/img/1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
} */
/* .login{
    margin: 100px 50px 0 0 ;
    padding: 80px 80px;
    width: 30%;
    height: 300px;
    border: 1px solid black;
    border-radius: 20px;
    float: right;
}*/
.el-form-item{
    color: white;
}

</style>